<template>
    <div class="custom">
        <goodsField />

        <!-- <templateFont :merchantExpandData="merchantExpandData" v-if="merchantExpandData" /> -->
        <!-- <warningSet /> -->
        <!-- <warningNotice /> -->
        <!-- <other :data="merchantExpandData" v-if="merchantExpandData" @onCancel="onCancel" />
        <warningSet :data="merchantExpandData" v-if="merchantExpandData" />-->
        <!-- <warningNotice :data="merchantExpandData" v-if="merchantExpandData" /> -->
        <!-- <div class="tabs">
            <a-tabs default-active-key="1">
                <a-tab-pane key="1" tab="商品字段配置">
                    <goodsField />
                </a-tab-pane>
                <a-tab-pane key="2" tab="模板字体配置"><templateFont /></a-tab-pane>
                <a-tab-pane key="3" tab="预警配置"><warningSet /></a-tab-pane>
                <a-tab-pane key="4" tab="报警通知"><warningNotice /> </a-tab-pane>
                <a-tab-pane key="5" tab="其他设置"><other /></a-tab-pane>
            </a-tabs>
        </div> -->

        <a-row :gutter="[16, 16]">
            <a-col :span="24">
                <div class="custom-item">
                    <div class="custom-title">
                        模板字体配置
                        <a-tooltip>
                            <template #title>模板字体配置</template>
                            <QuestionCircleOutlined />
                        </a-tooltip>
                    </div>
                    <a-checkbox-group v-model:value="fontListNodeKeys" style="width: 100%; margin-top: 15px">
                        <a-row :gutter="16">
                            <a-col v-for="(item, index) in templateFontList" :key="index">
                                <a-checkbox :value="item.value" @change="handleFont">{{ item.label }}</a-checkbox>
                            </a-col>
                        </a-row>
                    </a-checkbox-group>
                </div>
            </a-col>
        </a-row>

        <a-row :gutter="[16, 16]">
            <a-col :span="6">
                <div class="custom-item">
                    <div class="custom-title">
                        ESL心跳状态配置
                        <a-tooltip>
                            <template #title>ESL心跳状态配置</template>
                            <QuestionCircleOutlined />
                        </a-tooltip>
                    </div>
                    <div class="custom-box">
                        <div class="custom-box-left">
                            <div class="custom-box-label">定时上报状态</div>
                            <a-switch
                                class="custom-box-switch"
                                v-model:checked="eslHeartIs"
                                :checkedValue="1"
                                :unCheckedValue="0"
                                @change="handEslHeartIs"
                            />
                        </div>
                        <div class="custom-box-form">
                            <span class="text-left text-lable"> 间隔 </span>
                            <a-input-number
                                id="inputNumber"
                                v-model:value="eslHeartTime"
                                @blur="handeslHeartTime"
                                @change="checknumFun"
                                :min="1"
                                :max="100"
                                :disabled="!eslHeartIs"
                            />
                            <span class="text-right text-lable"> 分 </span>
                        </div>
                    </div>
                </div>
            </a-col>
            <a-col :span="6">
                <div class="custom-item">
                    <div class="custom-title">
                        设备下发刷新
                        <a-tooltip>
                            <template #title>设备下发刷新</template>
                            <QuestionCircleOutlined />
                        </a-tooltip>
                    </div>
                    <div class="custom-box">
                        <a-radio-group v-model:value="devDownRefresh" @change="handDevDownRefresh">
                            <a-radio v-for="(item, index) in devDownRefreshList" :key="index" :value="item.value">{{
                                item.label
                            }}</a-radio>
                        </a-radio-group>
                    </div>
                </div></a-col
            >
            <a-col :span="6">
                <div class="custom-item">
                    <div class="custom-title">
                        价格小数点设置
                        <a-tooltip>
                            <template #title>价格小数点设置</template>
                            <QuestionCircleOutlined />
                        </a-tooltip>
                    </div>
                    <div class="custom-box">
                        <div class="custom-box-left">
                            <div class="custom-box-label">价格小数点</div>
                            <a-switch class="custom-box-switch" v-model:checked="isPriceNumber" @change="handIsPriceNumber" />
                        </div>
                        <div class="custom-box-form">
                            <span class="text-left text-lable"> 保留 </span>
                            <a-input-number
                                id="inputNumber"
                                v-model:value="priceNumber"
                                @blur="handPriceNumber"
                                @change="checknumFun"
                                :min="1"
                                :max="100"
                                :disabled="!isPriceNumber"
                            />
                            <span class="text-right text-lable"> 位 </span>
                        </div>
                    </div>
                </div></a-col
            >
            <a-col :span="6">
                <div class="custom-item">
                    <div class="custom-title">
                        显示设备信息
                        <a-tooltip>
                            <template #title>显示设备信息</template>
                            <QuestionCircleOutlined />
                        </a-tooltip>
                    </div>
                    <div class="custom-box">
                        <div class="custom-box-left">
                            <div class="custom-box-label">温度\状态\电量\信道</div>
                            <a-switch class="custom-box-switch" v-model:checked="showDeviceInfo" @change="handShowDeviceInfo" />
                        </div>
                    </div></div
            ></a-col>
        </a-row>

        <a-row>
            <a-col :span="24">
                <div class="custom-item">
                    <div class="custom-title">
                        预警基本设置
                        <a-tooltip>
                            <template #title>预警基本设置</template>
                            <QuestionCircleOutlined />
                        </a-tooltip>
                    </div>
                    <div class="warning-box">
                        <a-row :gutter="[16, 16]">
                            <a-col :span="8" style="display: flex">
                                <a-checkbox v-model:checked="isApOfflineWarning" @change="handisApOfflineWarning">
                                    <div class="custom-box-label">基站设备离线状态</div>
                                </a-checkbox>
                                <div class="custom-box">
                                    <div class="custom-box-left">
                                        <div class="custom-box-form">
                                            <span class="text-left text-lable"> 超过 </span>
                                            <a-input-number
                                                id="inputNumber"
                                                v-model:value="warningApOffline"
                                                @blur="handWarningApOffline"
                                                @change="checknumFun"
                                                :min="1"
                                                :max="100"
                                                :disabled="!isApOfflineWarning"
                                            />
                                            <span class="text-right text-lable"> 分 </span>
                                        </div>
                                    </div>
                                </div>
                            </a-col>
                            <a-col :span="8" style="display: flex">
                                <a-checkbox v-model:checked="isJqOfflineWarning" @change="handisJqOfflineWarning">
                                    <div class="custom-box-label">价签设备离线状态</div>
                                </a-checkbox>
                                <div class="custom-box">
                                    <div class="custom-box-left">
                                        <div class="custom-box-form">
                                            <span class="text-left text-lable"> 超过 </span>
                                            <a-input-number
                                                id="inputNumber"
                                                v-model:value="warningJqOffline"
                                                @blur="handWarningJqOffline"
                                                @change="checknumFun"
                                                :min="1"
                                                :max="100"
                                                :disabled="!isJqOfflineWarning"
                                            />
                                            <span class="text-right text-lable"> 分 </span>
                                        </div>
                                    </div>
                                </div>
                            </a-col>
                            <a-col :span="8" style="display: flex">
                                <a-checkbox value="3" v-model:checked="isDevDownWarning" @change="handisDevDownWarning">
                                    <div class="custom-box-label">下发刷新设备失败</div>
                                </a-checkbox>
                                <div class="custom-box">
                                    <div class="custom-box-left">
                                        <div class="custom-box-form">
                                            <span class="text-left text-lable"> 超过 </span>
                                            <a-input-number
                                                id="inputNumber"
                                                v-model:value="warningDevDown"
                                                @blur="handWarningDevDown"
                                                @change="checknumFun"
                                                :min="1"
                                                :max="100"
                                                :disabled="!isDevDownWarning"
                                            />
                                            <span class="text-right text-lable"> 分 </span>
                                        </div>
                                    </div>
                                </div>
                            </a-col>
                            <a-col :span="8" style="display: flex">
                                <a-checkbox value="4" v-model:checked="isPowerWarning" @change="handisPowerWarning">
                                    <div class="custom-box-label">价签设备电量报警</div>
                                </a-checkbox>
                                <div class="custom-box">
                                    <div class="custom-box-left">
                                        <div class="custom-box-form">
                                            <span class="text-left text-lable"> 低于 </span>
                                            <!-- <a-input-number
                                                    id="inputNumber"
                                                    v-model:value="eslHeartTime"
                                                    @blur="eslHeartIsFun"
                                                    @pressEnter="eslHeartIsFun"
                                                    :min="1"
                                                    :max="100"
                                                /> -->
                                            <a-select
                                                v-model:value="batteryPercentage"
                                                :disabled="!isPowerWarning"
                                                @change="handBatteryPercentage"
                                            >
                                                <a-select-option
                                                    :value="item.value"
                                                    v-for="(item, index) in warningPowerList"
                                                    :key="index"
                                                    >{{ item.value }}</a-select-option
                                                >
                                            </a-select>
                                            <span class="text-right text-lable"> % </span>
                                        </div>
                                        <div class="custom-box-form form-ml">
                                            <span class="text-left text-lable"> 超过 </span>
                                            <a-input-number
                                                id="inputNumber"
                                                v-model:value="batteryMinutes"
                                                @blur="handBatteryMinutes"
                                                @change="checknumFun"
                                                :min="1"
                                                :max="100"
                                                :disabled="!isPowerWarning"
                                            />
                                            <span class="text-right text-lable"> 分 </span>
                                        </div>
                                    </div>
                                </div>
                            </a-col>
                            <a-col :span="12" style="display: flex">
                                <a-checkbox :value="0" v-model:checked="isTemperatureWarning" @change="handisTemperatureWarning">
                                    <div class="custom-box-label">价签环境温度报警</div>
                                </a-checkbox>
                                <div class="custom-box">
                                    <div class="custom-box-left">
                                        <div class="custom-box-form">
                                            <span class="text-left text-lable"> 超出 </span>
                                            <a-input-number
                                                id="inputNumber"
                                                v-model:value="minTemperature"
                                                @blur="checknum('min')"
                                                @change="checknumFun"
                                                :min="1"
                                                :max="900"
                                                :disabled="!isTemperatureWarning"
                                            />
                                            <span
                                                class="text-lable"
                                                style="background: none; border-left: none; border-right: none"
                                            >
                                                ~</span
                                            >
                                            <a-input-number
                                                id="inputNumber"
                                                v-model:value="maxTemperature"
                                                @blur="checknum('max')"
                                                @change="checknumFun"
                                                :disabled="!isTemperatureWarning"
                                                :min="1"
                                                :max="900"
                                            />
                                            <span class="text-right text-lable"> ℃ </span>
                                        </div>
                                        <div class="custom-box-form form-ml">
                                            <span class="text-left text-lable"> 超过 </span>
                                            <a-input-number
                                                id="inputNumber"
                                                v-model:value="temperatureMinutes"
                                                @blur="handTemperatureMinutes"
                                                @change="checknumFun"
                                                :disabled="!isTemperatureWarning"
                                                :min="1"
                                                :max="100"
                                            />
                                            <span class="text-right text-lable"> 分 </span>
                                        </div>
                                    </div>
                                </div>
                            </a-col>
                        </a-row>
                    </div>
                </div>
            </a-col>
        </a-row>

        <a-row>
            <a-col :span="24">
                <div class="custom-item">
                    <div class="custom-title">
                        系统报警设置
                        <a-tooltip>
                            <template #title>系统报警设置</template>
                            <QuestionCircleOutlined />
                        </a-tooltip>
                    </div>
                    <a-row :gutter="[16, 16]">
                        <a-col :span="2" style="margin-top: 15px">
                            <div class="custom-box" style="height: auto">
                                <div class="custom-box-left">
                                    <div class="custom-box-label">邮箱报警</div>
                                    <a-switch
                                        class="custom-box-switch"
                                        v-model:checked="isMailWarning"
                                        @change="handisMailWarning"
                                    />
                                </div>
                            </div>
                        </a-col>
                        <a-col :span="21" style="margin-top: 15px">
                            <a-row>
                                <a-col v-for="(item, index) in warningMailList" :key="item">
                                    <div class="system-item">
                                        <a-checkbox
                                            :value="item.value"
                                            @change="handwarningMail"
                                            v-model:checked="item.enable"
                                            :disabled="!isMailWarning"
                                        >
                                            {{ item.value }}</a-checkbox
                                        >
                                        <a-button
                                            type="link"
                                            :disabled="!isMailWarning"
                                            @click="handleWarninFun(item, index, 'MAIL', 'edit')"
                                        >
                                            <template #icon>
                                                <EditOutlined />
                                            </template>
                                        </a-button>
                                        <!-- <span @click="handleEdit(index, 'MAIL')" style="cursor: pointer"><EditOutlined /></span> -->
                                    </div>
                                </a-col>
                                <a-col :span="1">
                                    <a-button @click="handleWarninFun('', 0, 'MAIL', 'add')" :disabled="!isMailWarning">
                                        <template #icon><PlusOutlined /> </template> </a-button
                                ></a-col>
                            </a-row>
                        </a-col>
                    </a-row>
                    <a-row :gutter="[16, 16]">
                        <a-col :span="2" style="margin-top: 15px">
                            <div class="custom-box" style="height: auto">
                                <div class="custom-box-left">
                                    <div class="custom-box-label">短信通知</div>
                                    <a-switch class="custom-box-switch" v-model:checked="isSms" @change="handisSms" />
                                </div>
                            </div>
                        </a-col>
                        <a-col :span="21" style="margin-top: 15px">
                            <a-row>
                                <a-col v-for="(item, index) in warningMobileList" :key="index">
                                    <div class="system-item">
                                        <a-checkbox :value="item.value" v-model:checked="item.enable" :disabled="!isSms">
                                            {{ item.value }}</a-checkbox
                                        >

                                        <a-button
                                            type="link"
                                            @click="handleWarninFun(item, index, 'MAIL', 'edit')"
                                            :disabled="!isSms"
                                        >
                                            <template #icon><EditOutlined /> </template>
                                        </a-button>
                                    </div>
                                </a-col>
                                <a-col :span="1">
                                    <a-button @click="handleWarninFun('', 0, 'Mobile', 'add')" :disabled="!isSms">
                                        <template #icon><PlusOutlined /> </template> </a-button
                                ></a-col>
                            </a-row>
                        </a-col>
                    </a-row>
                </div>
            </a-col>
        </a-row>
        <a-modal
            v-if="warningItem.warningItemShow"
            v-model:visible="warningItem.warningItemShow"
            :title="warningItem.title"
            :width="420"
            @ok="handleWarningOk"
        >
            <a-form :label-col="{ span: 5 }" :model="warningItem" :wrapper-col="{ span: 19 }" :rules="rules" ref="formRef">
                <a-form-item label="邮箱" name="email" v-if="warningItem.type === 'MAIL'">
                    <a-row :gutter="[16, 16]">
                        <a-col :span="16">
                            <a-input v-model:value="warningItem.email" />
                        </a-col>
                        <a-col :span="7"> <a-button type="primary"> 验证邮箱地址</a-button></a-col>
                    </a-row>
                </a-form-item>
                <a-form-item label="手机号码" name="mobile" v-if="warningItem.type !== 'MAIL'">
                    <a-row :gutter="[16, 16]">
                        <a-col :span="24">
                            <a-input v-model:value="warningItem.mobile" />
                        </a-col>
                    </a-row>
                </a-form-item>
            </a-form>
        </a-modal>
    </div>
</template>

<script lang="ts">
import goodsField from './components/goodsField.vue';
import warningSet from './components/warningSet.vue';
import templateFont from './components/templateFont.vue';
import other from './components/other.vue';
import warningNotice from './components/warningNotice.vue';
import { QuestionCircleOutlined, ExclamationCircleOutlined } from '@ant-design/icons-vue';
import { defineComponent, ref, onMounted, createVNode } from 'vue';
import { message, Modal } from 'ant-design-vue';
import { editMerchantExpand, getMerchantExpand } from '@/api/merchant';
import { useI18n } from 'vue-i18n';

export default defineComponent({
    name: 'system-custom',
    components: { goodsField, warningNotice, templateFont, other, warningSet, QuestionCircleOutlined },
    setup() {
        const { t } = useI18n();
        let merchantExpandData: any = ref({});
        const devDownRefreshList = ref([
            { label: '节能模式', value: 1 },
            { label: '标准模式', value: 2 },
            { label: '极速模式', value: 3 },
        ]);
        const warningList = ref([
            { label: '节能模式', value: 1 },
            { label: '标准模式', value: 2 },
            { label: '极速模式', value: 3 },
        ]);
        const templateFontList = ref([
            { label: '思源黑体', value: 'A', isDefault: true },
            { label: '雅思细体', value: 'B', isDefault: false },
            { label: '方正楷体简体', value: 'C', isDefault: true },
            { label: '隶书', value: 'D', isDefault: true },
            { label: '幼圆', value: 'E', isDefault: true },
        ]);
        const warningPowerList = ref([
            { value: 10 },
            { value: 20 },
            { value: 30 },
            { value: 60 },
            { value: 90 },
            { value: 100 },
            { value: 120 },
        ]);
        const warningNodeKeys = ref([]);
        const warningMailList: any = ref([]);
        const warningMobileList: any = ref([]);
        const fontListNodeKeys = ref([]);
        const warningItem = ref({
            email: '',
            mobile: '',
            enable: false,
            type: '',
            editType: '',
            index: 0,
            warningItemShow: false,
            title: '',
        });
        // 设备下发刷新模式1:节能模式 2标准模式 3极速模式
        const devDownRefresh = ref(1);
        // 是否基站离线预警
        const eslHeartIs = ref(false);
        // 	心跳定时上报时间-分钟
        const eslHeartTime = ref(0);
        // 是否基站离线预警
        const isApOfflineWarning = ref(false);
        // 是否下发刷新设备失败
        const isDevDownWarning = ref(false);
        // 是否价签离线预警
        const isJqOfflineWarning = ref(false);
        // 是否发送邮件
        const isMailWarning = ref(false);
        // 是否电量报警
        const isPowerWarning = ref(false);
        //   "id": 0,
        const id = ref('');
        // 是否保留小数点
        const isPriceNumber = ref(false);
        // 是否发短信
        const isSms = ref(false);
        // 是否温度报警
        const isTemperatureWarning = ref(true);
        // 价格小数点后几位
        const priceNumber = ref(0);
        // 是否显示设备信息 温度/状态/电量/信道
        const showDeviceInfo = ref(false);
        // 字体：ABCDEFG
        const templateFont = ref(0);
        // 基站离线状态超过 分钟
        const warningApOffline = ref(0);
        // 下发刷新设备失败超过‘’分钟
        const warningDevDown = ref(0);
        //  	价签离线状态超过 分钟
        const warningJqOffline = ref(0);
        // 邮箱地址 json数组 {value:邮箱,enable:是否启用}
        const warningMail = ref('');
        // 手机号json数组 {value:手机号,enable:是否启用}
        const warningMobile = ref('');
        // 价签电量报警格式（30,30）
        const warningPower = ref('');
        // 温度报警：格式（0-40,30）
        const warningTemperature = ref('');
        // 价签电量报警格式 低于
        const batteryPercentage = ref(0);
        // 价签电量报警格式 超过
        const batteryMinutes = ref(0);
        // 价签环境温度报警超出最小数
        const minTemperature = ref(0);
        // 价签环境温度报警超出最大数
        const maxTemperature = ref(0);
        // 价签环境温度报警超过分钟
        const temperatureMinutes = ref(0);
        const checknumFlag = ref(false);

        // 表单校验规则
        const initRules = (t: fn) => {
            return {
                email: [
                    { required: true, message: '请输入邮箱地址', trigger: 'blur' },
                    { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] },
                ],
                mobile: [
                    {
                        required: true,
                        message: '请输入手机号',
                        trigger: 'blur',
                    },
                    {
                        pattern: '^0\\d{2,3}-?\\d{7,8}$|^(13[0-9]|15[0-9]|18[0-9]|14[0-9]|17[0-9])\\d{8}$',
                        message: '手机号格式不对',
                        trigger: 'blur',
                    },
                ],
            };
        }; // 表单校验

        const getData = async () => {
            const res: any = await getMerchantExpand({ page: 1, size: 1 });
            merchantExpandData.value = res[0];
            console.log(res[0].warningPower);
            warningMailList.value = JSON.parse(res[0].warningMail);
            warningMobileList.value = JSON.parse(res[0].warningMobile);
            fontListNodeKeys.value = res[0].templateFont.split(',');
            id.value = res[0].id;
            eslHeartIs.value = res[0].eslHeartIs == 1 ? true : false;
            isPriceNumber.value = res[0].isPriceNumber == 1 ? true : false;
            eslHeartTime.value = res[0].eslHeartTime;
            devDownRefresh.value = res[0].devDownRefresh;
            showDeviceInfo.value = res[0].showDeviceInfo == 1 ? true : false;
            isApOfflineWarning.value = res[0].isApOfflineWarning == 1 ? true : false;
            warningApOffline.value = res[0].warningApOffline;
            isJqOfflineWarning.value = res[0].isJqOfflineWarning == 1 ? true : false;
            warningJqOffline.value = res[0].warningJqOffline;
            isDevDownWarning.value = res[0].isDevDownWarning == 1 ? true : false;
            warningDevDown.value = res[0].warningDevDown;
            batteryPercentage.value = res[0].warningPower.split(',')[0];
            batteryMinutes.value = res[0].warningPower.split(',')[1];
            isPowerWarning.value = res[0].isPowerWarning == 1 ? true : false;
            isTemperatureWarning.value = res[0].isTemperatureWarning == 1 ? true : false;

            const warningTemperatureNum = res[0].warningTemperature.split(',');
            temperatureMinutes.value = warningTemperatureNum[1];
            const TemperatureNum = warningTemperatureNum[0].split('-');
            console.log(TemperatureNum);
            minTemperature.value = Number(TemperatureNum[0]);
            maxTemperature.value = Number(TemperatureNum[1]);
            isMailWarning.value = res[0].isMailWarning == 1 ? true : false;
            isSms.value = res[0].isSms == 1 ? true : false;
            // 已选择字体
        };
        const onCancel = () => {
            getData();
        };
        // 字体设置事件
        const handleFont = (keys: any) => {
            console.log(keys.target);
            let checked = keys.target.checked;
            let value = keys.target.value;
            let data = { id: id.value, templateFont: fontListNodeKeys.value.join(',') };
            // 多余的操作 接口数据类型问题

            let status = checked ? t('yl.enable') : t('yl.disable');
            let name = '';

            switch (value) {
                case 'A':
                    name = '思源黑体';
                    break;
                case 'B':
                    name = '雅思细体';
                    break;
                case 'C':
                    name = '方正楷体简体';
                    break;
                case 'D':
                    name = '隶书';
                    break;
                default:
                    name = '幼圆';
                    break;
            }

            submitFun(status, name, data);
        };
        // 定时上报状态
        const handEslHeartIs = (keys: any) => {
            let data = {
                eslHeartIs: keys ? 1 : 0,
                id: id.value,
            };
            let status = keys ? t('yl.enable') : t('yl.disable');
            submitFun(status, '定时上报状态', data);
        };
        // 定时上报状态间隔
        const handeslHeartTime = (keys: any) => {
            let data = {
                eslHeartTime: eslHeartTime.value,
                id: id.value,
            };

            let status = '定时上报状态设置为' + eslHeartTime.value + '分';
            if (checknumFlag.value) {
                submitFun(status, '', data);
            }
        };
        // 设备下发刷新
        const handDevDownRefresh = (val: any) => {
            let data = {
                devDownRefresh: val.target.value,
                id: id.value,
            };
            let name = '';

            switch (val.target.value) {
                case 1:
                    name = '节能模式';
                    break;
                case 2:
                    name = '标准模式';
                    break;

                default:
                    name = '极速模式';
                    break;
            }
            let status = '设备下发刷新模式更改为';
            submitFun(status, name, data);
        };
        // 价格小数点保留几位
        const handIsPriceNumber = (keys: any) => {
            let data = {
                isPriceNumber: keys ? 1 : 0,
                id: id.value,
            };
            let status = keys ? t('yl.enable') : t('yl.disable');

            submitFun(status, '价格小数点设置', data);
        };
        const handPriceNumber = (val: any) => {
            let data = {
                priceNumber: priceNumber.value,
                id: id.value,
            };

            let status = '价格小数点是否保留' + priceNumber.value + '位';
            if (checknumFlag.value) {
                submitFun(status, '', data);
            }
        };
        // 显示设备信息
        const handShowDeviceInfo = (keys: any) => {
            let data = {
                showDeviceInfo: keys ? 1 : 0,
                id: id.value,
            };
            let status = keys ? t('yl.enable') : t('yl.disable');
            submitFun(status, '显示设备信息', data);
        };
        // 基站设备离线状态
        const handisApOfflineWarning = (keys: any) => {
            console.log(keys.target.checked);
            let data = {
                isApOfflineWarning: keys.target.checked ? 1 : 0,
                id: id.value,
            };

            let status = keys.target.checked ? t('yl.enable') : t('yl.disable');
            submitFun(status, '基站设备离线状态', data);
        };
        // 基站设备离线状态超过时间
        const handWarningApOffline = () => {
            let data = {
                warningApOffline: warningApOffline.value,
                id: id.value,
            };

            let status = '基站设备离线状态设置为超过' + warningApOffline.value + '分';
            if (checknumFlag.value) {
                submitFun(status, '', data);
            }
        };
        // 价签设备离线状态
        const handisJqOfflineWarning = (keys: any) => {
            console.log(keys.target.checked);
            let data = {
                isJqOfflineWarning: keys.target.checked ? 1 : 0,
                id: id.value,
            };

            let status = keys.target.checked ? t('yl.enable') : t('yl.disable');
            submitFun(status, '价签设备离线状态', data);
        };

        // 基站设备离线状态超过时间
        const handWarningJqOffline = () => {
            let data = {
                warningJqOffline: warningJqOffline.value,
                id: id.value,
            };

            let status = '价签设备离线状态设置为超过' + warningJqOffline.value + '分';
            if (checknumFlag.value) {
                submitFun(status, '', data);
            }
        };

        // 下发刷新设备失败
        const handisDevDownWarning = (keys: any) => {
            console.log(keys.target.checked);
            let data = {
                isDevDownWarning: keys.target.checked ? 1 : 0,
                id: id.value,
            };

            let status = keys.target.checked ? t('yl.enable') : t('yl.disable');
            submitFun(status, '下发刷新设备失败', data);
        };

        // 下发刷新设备失败超过时间
        const handWarningDevDown = () => {
            let data = {
                warningDevDown: warningDevDown.value,
                id: id.value,
            };

            let status = '下发刷新设备失败设置为超过' + warningDevDown.value + '分';
            if (checknumFlag.value) {
                submitFun(status, '', data);
            }
        };
        // 价签设备电量报警
        const handisPowerWarning = (keys: any) => {
            console.log(keys.target.checked);
            let data = {
                isPowerWarning: keys.target.checked ? 1 : 0,
                id: id.value,
            };

            let status = keys.target.checked ? t('yl.enable') : t('yl.disable');
            submitFun(status, '价签设备电量报警', data);
        };
        // 价签设备电量报警低于
        const handBatteryPercentage = (val: any) => {
            let data = {
                warningPower: val + ',' + batteryMinutes.value,
                id: id.value,
            };

            let status = '价签设备电量报警设置为低于' + val + '%';
            if (checknumFlag.value) {
                submitFun(status, '', data);
            }
        };
        // 价签设备电量报警超过
        const handBatteryMinutes = () => {
            let data = {
                warningPower: batteryPercentage.value + ',' + batteryMinutes.value,
                id: id.value,
            };

            let status = '价签设备电量报警设置为超过' + batteryMinutes.value + '分';
            if (checknumFlag.value) {
                submitFun(status, '', data);
            }
        };

        // 价签设备电量报警
        const handisTemperatureWarning = (keys: any) => {
            console.log(keys.target.checked);
            let data = {
                isTemperatureWarning: keys.target.checked ? 1 : 0,
                id: id.value,
            };

            let status = keys.target.checked ? t('yl.enable') : t('yl.disable');
            submitFun(status, '价签环境温度报警', data);
        };
        // 价签环境温度报警
        const checknum = (type: string) => {
            if (type === 'max') {
                if (maxTemperature.value < minTemperature.value) {
                    console.log('最大值小于最小值');
                    return;
                }
            } else {
                if (minTemperature.value > maxTemperature.value) {
                    console.log('最小值需da于最大值');
                    return;
                }
            }
            if (!temperatureMinutes.value) {
                return;
            }
            if (minTemperature.value == maxTemperature.value) {
                console.log('不能相等');
                return;
            }
            // 10-340,70
            let data = {
                warningTemperature: minTemperature.value + '-' + maxTemperature.value + ',' + temperatureMinutes.value,
                id: id.value,
            };
            let status = '价签环境温度报警设置为超出' + minTemperature.value + '~' + maxTemperature.value + '℃ ';
            if (checknumFlag.value) {
                submitFun(status, '价签环境温度报警', data);
            }
        };
        // 价签环境温度报警超时
        const handTemperatureMinutes = () => {
            let data = {
                warningTemperature: minTemperature.value + '-' + maxTemperature.value + ',' + temperatureMinutes.value,
                id: id.value,
            };
            let status = '价签环境温度报警设置为超出' + temperatureMinutes.value + '分 ';
            if (checknumFlag.value) {
                submitFun(status, '', data);
            }
        };

        //邮箱报警
        const handisMailWarning = (keys: any) => {
            console.log(keys);
            let data = {
                isMailWarning: keys ? 1 : 0,
                id: id.value,
            };

            let status = keys ? t('yl.enable') : t('yl.disable');
            submitFun(status, '邮箱报警', data);
        };
        // 邮箱报警多选按钮触发事件
        const handwarningMail = (val: any) => {
            let data = {
                warningMail: JSON.stringify(warningMailList.value),
                id: id.value,
            };

            let status = val.target.checked ? t('yl.enable') : t('yl.disable');
            submitFun(status, val.target.value, data);
        };
        // input 框数据改变触发
        const checknumFun = () => {
            checknumFlag.value = true;
        };
        // 短信通知触发事件
        const handisSms = (keys: any) => {
            let data = {
                isSms: keys ? 1 : 0,
                id: id.value,
            };

            let status = keys ? t('yl.enable') : t('yl.disable');
            submitFun(status, '短信通知', data);
        };

        const handleWarninFun = (item: any, index: number, type: string, editType: string) => {
            if (editType == 'edit' && type == 'Mobile') {
                warningItem.value.mobile = item.value;
            } else if (editType == 'edit' && type == 'MAIL') {
                warningItem.value.email = item.value;
            }
            if (editType == 'add') {
                warningItem.value.mobile = '';
                warningItem.value.email = '';
            }
            if (type == 'Mobile' && editType == 'edit') {
                warningItem.value.title = '编辑短信通知';
            } else if (type == 'Mobile' && editType == 'add') {
                warningItem.value.title = '新增短信通知';
            } else if (type == 'MAIL' && editType == 'add') {
                warningItem.value.title = '新增邮箱报警';
            } else {
                warningItem.value.title = '编辑邮箱报警';
            }
            warningItem.value.editType = editType;
            warningItem.value.type = type;
            warningItem.value.index = index;
            warningItem.value.warningItemShow = true;
        };
        const rules = initRules(t);
        const formRef = ref();
        const handleWarningOk = () => {
            formRef.value.validate().then(() => {
                // 深拷贝，提交数据，如果不深拷贝的话，页面会先新增，弹窗后消失
                let MailList: any = JSON.parse(JSON.stringify(warningMailList.value));
                let MobileList: any = JSON.parse(JSON.stringify(warningMobileList.value));
                if (warningItem.value.type == 'MAIL') {
                    if (warningItem.value.editType == 'edit') {
                        MailList[warningItem.value.index].value = warningItem.value.email;
                    } else {
                        MailList.push({ value: warningItem.value.email, enable: false });
                    }
                } else {
                    if (warningItem.value.editType == 'edit') {
                        MobileList[warningItem.value.index].value = warningItem.value.mobile;
                    } else {
                        MobileList.push({
                            value: warningItem.value.mobile,
                            enable: false,
                        });
                    }
                }
                let data = {
                    warningMail: JSON.stringify(MailList),
                    warningMobile: JSON.stringify(MobileList),
                    id: id.value,
                };
                editMerchantExpand(data)
                    .then(() => {
                        const timer = setTimeout(() => {
                            warningItem.value.warningItemShow = false;
                            getData();
                            clearTimeout(timer);
                        }, 500);
                    })
                    .catch(() => {});
            });
        };
        const submitFun = (status: any, name: string, data: any) => {
            Modal.confirm({
                title: t('yl.tip'),
                icon: createVNode(ExclamationCircleOutlined),
                content: t('yl.changeDeptStatusConfirm', { status: status, name: name }),
                onOk() {
                    editMerchantExpand(data)
                        .then(() => {
                            const timer = setTimeout(() => {
                                checknumFlag.value = false;
                                getData();
                                clearTimeout(timer);
                            }, 500);
                        })
                        .catch(() => {});
                },
                onCancel() {
                    getData();
                },
            });
        };
        onMounted(async () => {
            getData();
        });
        return {
            merchantExpandData,
            getMerchantExpand,
            onCancel,
            devDownRefreshList,
            warningNodeKeys,
            warningList,
            warningMailList,
            warningMobileList,
            devDownRefresh,
            eslHeartIs,
            eslHeartTime,
            isApOfflineWarning,
            isDevDownWarning,
            isJqOfflineWarning,
            isMailWarning,
            isPowerWarning,
            isPriceNumber,
            isSms,
            isTemperatureWarning,
            priceNumber,
            showDeviceInfo,
            templateFont,
            warningApOffline,
            warningDevDown,
            warningJqOffline,
            warningMail,
            warningMobile,
            warningPower,
            warningTemperature,
            templateFontList,
            fontListNodeKeys,
            handleFont,
            handEslHeartIs,
            t,
            submitFun,
            handeslHeartTime,
            handDevDownRefresh,
            handIsPriceNumber,
            handPriceNumber,
            handShowDeviceInfo,
            handisApOfflineWarning,
            handWarningApOffline,
            handisJqOfflineWarning,
            handWarningJqOffline,
            handisDevDownWarning,
            handWarningDevDown,
            batteryPercentage,
            batteryMinutes,
            warningPowerList,
            handisPowerWarning,
            handBatteryPercentage,
            handBatteryMinutes,
            handisTemperatureWarning,
            minTemperature,
            maxTemperature,
            checknum,
            temperatureMinutes,
            checknumFun,
            checknumFlag,
            handTemperatureMinutes,
            handisMailWarning,
            handwarningMail,
            handleWarninFun,
            warningItem,
            handleWarningOk,
            rules,
            formRef,
            handisSms,
        };
    },
});
</script>

<style lang="scss">
.custom {
    .tabs {
        display: flex;
        justify-content: center;
        .ant-tabs-bar {
            display: flex;
            border-bottom: none;
            justify-content: center;
        }
    }
    .tabs-content {
        width: 100%;
        margin: 0 auto;
        padding: 20px;
        background: #fafafa;
    }
}
.box {
    width: 100%;
    margin: 20px auto auto;
    padding: 20px;
    background: #fafafa;
    position: relative;
    margin-top: 20px;

    .headline {
        margin-bottom: 20px;
        font-size: 20px;
        font-weight: bold;
        color: #161616;
    }
}

.custom-item {
    border: 1px solid #e8e8e8;
    padding: 20px;
    border-radius: 5px;
    margin-top: 15px;
    .custom-title {
        font-size: 15px;
        color: #333;
        font-weight: bold;
        // display: flex;
        // justify-content: space-between;
        .anticon {
            font-size: 16px;
            color: #999;
        }
    }
    .custom-box {
        display: flex;
        // padding: 15px 0px;
        justify-content: space-between;
        height: 50px;
        align-items: center;
        .custom-box-left {
            display: flex;
            align-items: center;

            .custom-box-label {
                font-size: 14px;
                color: #333;
                margin-right: 10px;
            }
        }
        .custom-box-form {
            display: flex;
            align-items: center;
            .text-lable {
                background: #dfdfdf;
                display: block;
                height: 28px;
                box-sizing: border-box;
                width: 35px;
                border: 1px solid #d9d9d9;
                text-align: center;
                line-height: 28px;
            }
            .text-left {
                border-radius: 2px 0 0 2px;
            }
            .text-right {
                border-radius: 0px 2px 2px 0;
            }
            .ant-input-number {
                border-radius: 0;
            }
            .ant-select-selector {
                border-radius: 0;
            }
        }
        .form-ml {
            margin-left: 10px;
        }
        .ant-input-number-handler-wrap {
            display: none;
        }
    }
    .ant-checkbox-wrapper {
        display: flex;
        align-items: center;
    }
    .system-item {
        display: flex;
        margin-right: 15px;
        height: 28px;
        line-height: 28px;
    }
    input {
        text-align: center;
    }
}
</style>
